// import About from '../Views/About.vue'
// import Home from '../Views/Home.vue'
import {
  createRouter,
  createWebHashHistory,
  createWebHistory,
} from 'vue-router'

//hash模式
// const router = createRouter({
//   history: createWebHashHistory(),
//   routes: [
//     { path: '/home', component: Home },
//     {
//       path: '/about',
//       component: About,
//     },
//     {
//       path: '/',
//       redirect:'/home',
//     },
//   ],
// })

//history
// const router = createRouter({
//   history: createWebHistory(),
//   routes: [
//     { path: '/', redirect: 'home' },
//     { path: '/home', component: Home },
//     { path: '/about', component: About },
//   ],
// })

//路由懒加载
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', redirect: '/home' },
    {
      path: '/home',
      name: 'home',
      component: () => import('../Views/Home.vue'),
      children: [
        { path: ' ', redirect: '/home/HomeRanking' },
        {
          path: 'homeRanking',
          component: () => import('../Views/HomeRanking.vue'),
        },
        {
          path: 'homeRecommend',
          component: () => import('../Views/HomeRecommend.vue'),
        },
      ],
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../Views/About.vue'),
    },
    {
      path: '/order',
      name: 'order',
      component: () => import('../Views/Order.vue'),
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('../Views/Login.vue'),
    },
    {
      path: '/user',
      name: 'user',
      component: () => import('../Views/User.vue'),
    },
    {
      path: '/:pathMatch(.*)',
      component: () => import('../Views/NotFound.vue'),
    },
  ],
})
const isAdmin = true
if (isAdmin) {
  router.addRoute({
    path: '/admin',
    component: () => import('../Views/Admin.vue'),
  })
  router.addRoute('home', {
    path: 'homeVip',
    component: () => import('../Views/HomeVip.vue'),
  })
}
// console.log(router.getRoutes())

//2 路由导航守卫
//进行任何的路由跳转之前，传入的beforeEach中的函数都会被回调
router.beforeEach((to, from) => {
  const token = window.localStorage.getItem('token')
  // console.log(to.path === '/user' && token)
  // console.log(!token)
  // console.log(to.path)
  if ((to.path === '/order' || (to.path === '/user' ))&& !token) {
    return '/login'
  }
})

//完整的导航解析流程：
// 导航被触发。
//  在失活的组件里调用 beforeRouteLeave 守卫。
//  调用全局的 beforeEach 守卫。
//  在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。
//  在路由配置里调用 beforeEnter。
//  解析异步路由组件。
//  在被激活的组件里调用 beforeRouteEnter。
//  调用全局的 beforeResolve 守卫(2.5+)。
//  导航被确认。
//  调用全局的 afterEach 钩子。
//  触发 DOM 更新。
//  调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入
export default router
